<template>
	<body id="paper">
		<el-form :model="registerForm" :rules="rules" class="login-container" label-position="left" label-width="0px"
			v-loading="loading">
			<h3 class="login_title">用户注册</h3>
			<el-form-item prop="name">
				<el-input type="text" v-model="registerForm.name" auto-complete="off" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item prop="username">
				<el-input type="text" v-model="registerForm.username" auto-complete="off" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="registerForm.password" auto-complete="off"
					placeholder="密码"></el-input>
			</el-form-item>
			<el-form-item prop="passwordConfirm">
				<el-input type="text" v-model="registerForm.passwordConfirm" auto-complete="off"
					placeholder="确认密码"></el-input>
			</el-form-item>

			<el-form-item style="width: 100%">
				<el-button type="primary" v-on:click="register">立即注册</el-button>
				<el-button v-on:click="tologin">返回登录</el-button>
			</el-form-item>
		</el-form>
	</body>
</template>

<script>
	export default {
		name: 'Register',
		data() {
			return {
				rules: {
					name: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: '账号不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}],
					passwordConfirm: [{
						required: true,
						message: '确认密码和密码要求一致，且相同',
						trigger: 'blur'
					}]
				},
				checked: true,
				registerForm: {
					name: '',
					username: '',
					password: '',
					passwordConfirm: ''
				},
				loading: false
			}
		},
		methods: {
			register() {
				var _this = this;
				if (this.registerForm.password !== this.registerForm.passwordConfirm) {
					this.$message({
						message: '两次输入的密码不一致',
						type: 'error'
					})
					return
				}
				var params = new URLSearchParams;
				params.append("name", _this.registerForm.name);
				params.append("username", _this.registerForm.username);
				params.append("password", _this.registerForm.password);
				_this.$http.post("/register", params).then(function(resp) {
						// console.log(response.data.status)
						if (resp.data.code === 200) {
							_this.$message({
								message: '恭喜你，注册成功',
								type: 'success'
							})
							_this.$router.replace('/login');
						} else {
							_this.$message({
								message: '该用户名已存在，请更换一个',
								type: 'error'
							})
						}
					})
			},
			tologin() {
				this.$router.replace('/login')
			}
		}
	}
</script>

<style>
	#paper {
		/*background:url("../assets/img/bg/eva1.jpg") no-repeat;*/
		background-position: center;
		height: 100%;
		width: 100%;
		background-size: cover;
		background-color: #5eab71;
		position: fixed;
	}

	body {
		margin: -5px 0px;
	}

	.login-container {
		border-radius: 15px;
		background-clip: padding-box;
		margin: 13% 38%;
		width: 450px;
		padding: 35px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
	}

	.login_title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}

	.login_remember {
		margin: 0px 0px 35px 0px;
		text-align: left;
	}
</style>